<template>
  <div class="goodDet">
    <h1>商品管理 -- 商品详情</h1>
    <div class="form">
      <el-form ref="form" :model="form" label-width="180px">
        <el-form-item label="商品名称" width="200px">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="商品描述">
          <el-input v-model="form.subtitle" :rows="5"></el-input>
        </el-form-item>
        <el-form-item label="所属分类">
          <el-select v-model="form.status" placeholder="请选择活动区域">
            <el-option :label="item.name" :value="item.id" v-for="item in kindData" :key="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品价格">
          <el-input placeholder="请输入内容" v-model="form.price" type="number">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>
        <el-form-item label="商品库存">
          <el-input placeholder="请输入内容" v-model="form.stock" type="number">
            <template slot="append">件</template>
          </el-input>
        </el-form-item>
        <el-form-item label="商品图片">
          <img :src="form.imageHost" alt="" width="100px" height="100px">
        </el-form-item>
        <el-form-item label="商品详情">
          <div v-html="form.detail"></div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { goodDetail } from '../api/index';
export default {
  data(){
    return {
      form:[],
      kindData:[]
    }
  },
  computed:{
    productId(){
      return this.$route.query.productId
    }
  },
  created(){
    this.init()
  },
  methods:{
    init(){
      goodDetail({productId:this.productId}).then(res=>{
        console.log(res);
        if(res.status == 0){
          this.form = res.data
        }
      })
    }
  }
}
</script>

<style>

</style>